<template>
  <div>
      <div class="mavto">
          <div class="head">
              <head>
                  <!-- &nbsp;广场 -->
                 <div><span class="iconfont icon-zuoyou1" @click="$router.push('/recommend')"></span> </div>
                 <div class="cnter">
                     <span class="iconfont icon-logo"></span>
                 </div>
                 <div class="right">
                     <span class="iconfont icon-diandiandian" ></span>
                 </div>
              </head>
          </div>
          
          <div class="mvmian" v-if="mvlss.data">
             <div class="mming" v-for="(item,index) in mvlss.data" :key="item.id" v-show="index<20" @click="getmvid(item.id)">
                 <div>
                     <!-- <img :src="item.cover" alt=""> -->
                     <van-image
                        lazy-load
                        :src="item.cover"
                        />
                     <div class="icon">
                        <span>{{item.playCount | playCount}}次播放</span>
                     </div>
                 </div>
                 <p>{{item.name}}</p>
             </div>
          </div>
          <div class="mvlisttt">
              <video width="320" height="240"
               src=""
               controls
               hidden
               >
                <source src="movie.mp4" type="video/mp4">
                <!-- <source src="movie.ogg" type="video/ogg"> -->
             </video>
          </div>
      </div>
  </div>
</template>

<script>

import {getmvlistop} from "../api/mvlist"

export default {
    data(){
        return{
            mvlss:{

            },
            mvliId:null
        }
    },
    methods:{
        getmvliss(){
           
            getmvlistop().then(data=>{
                this.mvlss=data;
                console.log(data)
            })
            //,getmvlist 
            // getmvlist({id:14276994}).then(data=>{
            //     console.log("mvurl",data)
            //     // console.log(data.data.url)
            // })
        },
        getmvid(id){
            this.$emit("getmvplay-id",id)
            console.log(id)
        }
    },
    created(){
        this.getmvliss()
        
    },
    //过滤器
    filters:{
      playCount(value){
       let w = value >10000? value /10000:value ;
       let y = w >10000?parseInt(value/10000) +"亿" : parseInt(w) + "万"
       return y
      }
   },
    
    
}
</script>

<style lang="less">
.mavto{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
        .head{
            height: 40px;
            width: 100%;
            head{
            top: 0;
            left: 0;
             z-index: 5;
            height: 40px;
            width: 100%;
            position: fixed;
            display: flex;
            background-color: #f5f5f5;
            line-height: 40px;
            padding-left: 10px;
            padding-right: 10px;
            box-sizing: border-box;
            justify-content: space-between;
            font-weight: 600;
            div{
                width: 25%;
                height: 40px;
                font-size: 18px;
                span{
                    font-size: 18px;
                }
            }
            div.cnter{
                text-align: center;
                width: 50%;
                height: 40px;
                span{
                    font-size: 20px;
                }
                line-height:40px;
            }
            div.right{
                text-align: right;
                span{
                    font-size: 22px;
                }
            }
            span{
                font-size: 18px;
                color: black;
            }
        }
    }
   
    .mvmian{
        // margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .mming{
            width: 49%;
            // height:160px;
            margin-top: 5px;
            margin-bottom: 5px;
            // border-radius: 10px;
            overflow: hidden;
            div{
                width: 100%;
                height: 100px;
                position: relative;
                img{
                    // width: 100%;
                    margin: auto;
                    height: 100%;
                    // border-radius: 10px;
                }
                &.icon{
                    position:absolute;
                    width: 100%;
                    height: 15px;
                    bottom: 0px;
                    color: #fff;
                    font-size: 10px;
                }
            }
            p{
                width: 100%;
                
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
</style>